<template>
  <CDialog
    title="导出日志"
    append-to-body
    destroy-on-close
    size="small"
    v-model:visible="dialogVisible"
    @cancel="dialogVisible = false"
    :loading="loading"
    confirmText="导出"
    @confirm="handleExportLog"
  >
    <el-form ref="formRef" :rules="rules" :model="editForm" label-position="top">
      <el-form-item label="操作日期" prop="exportTime">
        <el-date-picker
          v-model="editForm.exportTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
          :shortcuts="shortcuts"
        />
      </el-form-item>
    </el-form>
  </CDialog>
</template>
<script lang="ts">
export default {
  name: 'ExportLogDialog'
};
</script>
<script lang="ts" setup>
import { computed, defineProps, defineEmits, ref, watch, reactive } from 'vue';
import { CDialog } from '@/components/CDialog';
import { useMessage } from '@/hooks/useMessage';
import { useExport } from '@/hooks/useExport';
import { exportLog } from '@/apis/system/systemLog/logList';
import dayjs from 'dayjs';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});
const emit = defineEmits(['update:visible', 'refresh']);
const { handleExportFile } = useExport();
const loading = ref(false);
const dialogVisible = computed<boolean>({
  get: () => {
    return props.visible;
  },
  set: val => {
    emit('update:visible', val);
  }
});
const formRef = ref();
const { createMessage } = useMessage();

const editForm = reactive<any>({
  operateTimeBegin: '',
  operateTimeEnd: '',
  exportTime: []
});

const rules = reactive({
  exportTime: [
    {
      required: true,
      message: '导出日期不能为空',
      trigger: ['submit', 'change']
    }
  ]
});

watch(
  () => dialogVisible.value,
  () => {
    editForm.operateTimeBegin = '';
    editForm.operateTimeEnd = '';
    editForm.exportTime = [];
  }
);

function handleExportLog() {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      editForm.operateTimeBegin = editForm.exportTime?.length ? editForm.exportTime[0] : undefined;
      editForm.operateTimeEnd = editForm.exportTime?.length ? editForm.exportTime[1] : undefined;

      if (dayjs(editForm.operateTimeEnd).diff(editForm.operateTimeBegin, 'year') > 1) {
        createMessage.warning('日期范围超过最大限制(1年),请修改后重试');
        return;
      }
      loading.value = true;
      const params = {
        operateTimeBegin: editForm.operateTimeBegin,
        operateTimeEnd: editForm.operateTimeEnd
      };
      handleExportFile(exportLog, params)
        .then(() => {
          dialogVisible.value = false;
        })
        .finally(() => {
          loading.value = false;
        });
    }
  });
}
const shortcuts = [
  {
    text: '近一周',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    }
  },
  {
    text: '近一月',
    value: () => {
      const end = new Date();
      const start = dayjs().add(-1, 'month').toDate();
      return [start, end];
    }
  },
  {
    text: '近二月',
    value: () => {
      const end = new Date();
      const start = dayjs().add(-2, 'month').toDate();
      return [start, end];
    }
  }
];
</script>
